<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<link rel="StyleSheet" href="css/itemcard.css" type="text/css"
      media="screen" />

<link rel="StyleSheet" href="css/change.css" type="text/css"
      media="screen" />
<div>
<button id="change">换一换</button>
</div>
<div id="item">

    <a href="itemForm?itemId=EST-24" class="cardItem">
        <div class="item_card">
            <div class="item_card_pic">
                <img id="pic1" src="images/wujinxia.jpg"/>
            </div>
            <div class="item_card_content">
                <h4>无尽夏</h4>
                <div class="item_card_description">
                    奶油，青提，蜜瓜，铁观音的微苦托起深度
                </div>
            </div>
        </div>
    </a>

    <a href="itemForm?itemId=EST-7" class="cardItem">
        <div class="item_card">
            <div class="item_card_pic">
                <img id="pic2" src="images/maoshanwang.jpg"/>
            </div>
            <div class="item_card_content">
                <h4>猫山王蛋糕</h4>
                <div class="item_card_description">
                    榴莲，乳脂奶油，金色果肉，浓郁榴莲口感
                </div>
            </div>
        </div>
    </a>

    <a href="itemForm?itemId=EST-4" class="cardItem">
        <div class="item_card">
            <div class="item_card_pic" class="cardItem">
                <img id="pic3" src="images/blackcube.jpg"/>
            </div>
            <div class="item_card_content">
                <h4>黑方</h4>
                <div class="item_card_description">
                    白兰地酒，纯黑巧克力，白兰地的味道，纯黑巧克力的香醇
                </div>
            </div>
        </div>
    </a>

    <a href="itemForm?itemId=EST-23" class="cardItem">
        <div class="item_card">
            <div class="item_card_pic">
                <img id="pic4" src="images/shuiniCAKE.jpg"/>
            </div>
            <div class="item_card_content">
                <h4>水泥蛋糕</h4>
                <div class="item_card_description">
                    黑芝麻，口感细腻丝滑
                </div>
            </div>
        </div>
    </a>

    <a href="itemForm?itemId=EST-5" class="cardItem">
        <div class="item_card">
            <div class="item_card_pic">
                <img id="pic5" src="images/orange.jpg"/>
            </div>
            <div class="item_card_content">
                <h4>橘与橙</h4>
                <div class="item_card_description">
                    奶油，卡曼橘，包含不同柑橘元素，7个风味层次
                </div>
            </div>
        </div>
    </a>

    <a href="itemForm?itemId=EST-3" class="cardItem">
        <div class="item_card">
            <div class="item_card_pic" class="cardItem">
                <img id="pic6" src="images/black.jpg"/>
            </div>
            <div class="item_card_content">
                <h4>布莱克</h4>
                <div class="item_card_description">
                    榛子酱，黑巧克力，黑巧克力和中国榛子
                </div>
            </div>
        </div>
    </a>

    <a href="itemForm?itemId=EST-8" class="cardItem">
        <div class="item_card">
            <div class="item_card_pic">
                <img id="pic7" src="images/jinzhi.jpg"/>
            </div>
            <div class="item_card_content">
                <h4>金枝</h4>
                <div class="item_card_description">
                    奶油，树莓，柚子，稀有水果风味
                </div>
            </div>
        </div>
    </a>

    <a href="itemForm?itemId=EST-9" class="cardItem">
        <div class="item_card">
            <div class="item_card_pic">
                <img id="pic8" src="images/songren.jpg"/>
            </div>
            <div class="item_card_content">
                <h4>松仁淡奶</h4>
                <div class="item_card_description">
                    大兴安岭松仁，松子的香气
                </div>
            </div>
        </div>
    </a>

    <a href="itemForm?itemId=EST-26" class="cardItem">
        <div class="item_card">
            <div class="item_card_pic" class="cardItem">
                <img id="pic9" src="images/molihua.jpg"/>
            </div>
            <div class="item_card_content">
                <h4>茉莉花</h4>
                <div class="item_card_description">
                    奶油，茉莉花，蜜瓜，茉莉花浸的奶油
                </div>
            </div>
        </div>
    </a>
</div>

<script>
    $(function () {
        function randomNums(n, min, max) {
            var arr = [];
            for (var i = 0; i < n; i++) {
                var ran = Math.ceil(Math.random() * (max - min) + min);
                while (isExist(arr, ran)) {
                    ran = Math.ceil(Math.random() * (max - min) + min);
                }
                arr[i] = ran;
            }
            return arr;
        }

        function isExist(arr, ran) {
            for (var i = 0; i < arr.length; i++) {
                if (arr[i] == ran) {
                    return true;
                }
            }
            return false;
        }

        $('.cardItem').hide();
        var arr = randomNums(3,0,9);
        var x = 1;
        $('.cardItem').each(function (){
            if(isExist(arr, x)){
                $(this).show();
            }
            x++;
        })

        $('#change').on('click',function (){
            $('.cardItem').hide();
            arr = randomNums(3,0,9);
            x = 1;
            $('.cardItem').each(function (){
                if(isExist(arr, x)){
                    $(this).show();
                }
                x++;
            })
        })

    });
</script>
